import React from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { Tabs } from 'antd-mobile';
import style from './css/film.module.css';

const Film = () => {
  const navigate = useNavigate();

  let { pathname } = useLocation();
  return (
    <>
      <div className={style.swiper}>Film 轮播</div>
      <div className={style.tabbar}>
        <Tabs
          activeKey={pathname}
          onChange={(key) => {
            navigate(key);
          }}
        >
          <Tabs.Tab
            title="正在热映"
            key="/film/nowPlaying"
          ></Tabs.Tab>
          <Tabs.Tab
            title="即将上映"
            key="/film/comingSoon"
          ></Tabs.Tab>
        </Tabs>
      </div>
      <Outlet />
    </>
  );
};

export default Film;
